<template>
  <view :class="[`${prefixCls}-step-card-container`]">
    <view class="step-card-item" v-for="(v, i) of stepList" :key="i">
      <view class="card-icon"> <uv-icon :name="v.icon" color="#439dbc" size="18px"></uv-icon> </view>
      <view class="card-title">{{ v.title }}</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'stepCard',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      stepList: [
        {
          icon: 'share-square',
          title: '分享活动邀请好友',
        },
        {
          icon: 'edit-pen',
          title: '好友登录预约看房',
        },
        {
          icon: 'empty-coupon',
          title: '好友首次签约付款',
        },
        {
          icon: 'gift',
          title: '邀请成功获得奖励',
        },
      ],
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.#{prefixCls('step-card-container')} {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20rpx 0;
  .step-card-item {
    position: relative;
    flex: 1;
    .card-icon {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 80rpx;
      margin: 20rpx auto 24rpx;
      border-radius: 50%;
      background-color: #ecf5f8;
      overflow: hidden;
      z-index: 99;
    }
    .card-title {
      width: 80rpx;
      margin: 0 auto;
      font-size: 20rpx;
      color: #666;
    }
  }
  .step-card-item::before,
  .step-card-item::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 0;
    left: 0;
    top: 61rpx;
    transform: translateY(-50%);
    border: 1rpx dashed #1ccdc3;
  }
  .step-card-item::after {
    left: auto;
    right: 0;
  }
  .step-card-item:first-child::before,
  .step-card-item:last-child::after {
    width: 0;
    border: 0;
  }
}
</style>
